<template>
    <view>
        <a-row>
            <a-col>
                <a-card title="位置信息" style="width:250px;margin-bottom:10px">
                    <a-form labelAlign="right" :label-col="{ span: 10 }">
                        <a-form-item label="仪器遇卡位置">
                            <a-input-number v-model:value="position.instrumentPosit" style="width: 100px;" />
                        </a-form-item>
                        <a-form-item label="电缆拉断位置">
                            <a-input-number v-model:value="position.cablePosit" style="width: 100px;" />
                        </a-form-item>
                        <a-form-item label="落鱼底部位置">
                            <a-input-number v-model:value="position.fallPosit" style="width: 100px;" />
                        </a-form-item>
                    </a-form>
                </a-card>
                <a-card title="落鱼信息" style="width:250px;margin-bottom:10px" bordered="false">
                    <a-form labelAlign="right" :label-col="{ span: 10 }">
                        <a-form-item label="电缆型号">
                            <a-select :dropdown-match-select-width="false" v-model="selectedCableId" placeholder="请选择电缆编号" style="width: 100px;">
                            <a-select-option v-for="(item, index) in dataSource" :key="index" :value="item.id">
                                {{ item.cableId }}
                            </a-select-option>
                        </a-select>
                        </a-form-item>
                        <a-form-item label="落井电缆长度">
                            <a-input-number v-model:value="falling.fallWellLength" style="width: 100px;" />
                        </a-form-item>
                        <a-form-item label="落仪器串总长">
                            <a-input-number v-model:value="falling.fallInstruLength" style="width: 100px;" />
                        </a-form-item>
                    </a-form>
                </a-card>
                <a-card title="井液密度" style="width:250px;margin-bottom:10px" bordered="false">
                    <a-form labelAlign="right" :label-col="{ span: 10 }">
                        <a-form-item label="井液密度">
                            <a-input-number v-model:value="density" style="width: 100px;" />
                        </a-form-item>
                    </a-form>
                </a-card>
                <a-button type="primary" style="width:250px;" @click="onSubmit">提交</a-button>
            </a-col>
        </a-row>
    </view>
</template>
<script setup>
import { queryList } from "@/api/tool/cable.js";
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });
const dataSource = ref([]);
 // 用于保存选中的cableId
 const selectedCableId = ref('');
const position = ref({
    instrumentPosit: 0,
    cablePosit: 0,
    fallPosit: 0
})
const falling = ref({
    cableType: '',
    fallWellLength: 0,
    fallInstruLength: 0
})
const density = ref(0)

function typeCable() {
    queryList(query.value).then((response) => {
        dataSource.value = response.content;
        console.log(dataSource.value);
    });
}
typeCable();
function onSubmit(params) {

}
</script>